<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品购买</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>
    <style>
        .img {
            max-width: 5%;
            height: 5%;
        }
    </style>
</head>
<body class="p-3 m-0 border-0 bd-example">
<div class="products text-center">
    <div class="product row ">
        <img class="col img p-1" src="#">
        <p class="product-name col p-1">商品1</p>
        <p class="product-price col p-1">价格1</p>
        <button type="button" class="btn btn-outline-primary buy-btn col p-1"
                data-url="http://localhost:9090/g01_web/pay/p1" amountNum="10">购买
        </button>
    </div>
    <div class="product row">
        <img class="col img p-1" src="#">
        <p class="product-name col p-1">商品2</p>
        <p class="product-price col p-1">价格2</p>
        <button type="button" class="btn btn-outline-primary buy-btn col p-1" data-url="exampleurl?id=2">购买</button>
    </div>
    <div class="product row">
        <img class="col img p-1" src="#">
        <p class="product-name col p-1">商品3</p>
        <p class="product-price col p-1">价格3</p>
        <button type="button" class="btn btn-outline-primary buy-btn col p-1" data-url="exampleurl?id=3">购买</button>
    </div>
    <div class="product row">
        <img class="col img p-1" src="#">
        <p class="product-name col p-1">商品4</p>
        <p class="product-price col p-1">价格4</p>
        <button type="button" class="btn btn-outline-primary buy-btn col p-1" data-url="exampleurl?id=4">购买</button>
    </div>
    <div class="product row">
        <img class="col img p-1" src="#">
        <p class="product-name col p-1">商品5</p>
        <p class="product-price col p-1">价格5</p>
        <button type="button" class="btn btn-outline-primary buy-btn col p-1" data-url="exampleurl?id=5">购买</button>
    </div>
</div>
    <label>请求初始参数
        <textarea rows="10" id="dataJson">
             {
    "body": {
    "amount": "1",
    "callBackUrl": "http://example.com/callback",
    "currencyType": "BRL",
    "goods": "goods1",
    "notifyUrl": "http://example.com/notify",
    "orderId": "YWS190722070956398",
    "orderTime": "20230722130005",
    "phone":"7400745734",
    "email":"example@example.com",
    "name": "xxkk"
    },
    "head": {
    "mchtId": "2001016000150606",
    "biz": "bq101",
    "version": "20"
    }
    }
        </textarea>
    </label>

<script>
    let datastr = $('#dataJson').text();
    // 点击购买按钮时触发 AJAX 请求
    document.querySelectorAll('.buy-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            // 发送 AJAX 请求
            var amount = $(this).attr('amountNum');
            var url1 = $(this).attr('data-url');

            let jsondata = JSON.parse(datastr);
            jsondata['body']['amount'] = amount;
            console.log("请求参数: " + JSON.stringify(jsondata));
            $.ajax({
                type: 'POST',
                url: url1,
                contentType: "application/json;charset=utf-8",
                // 如果想以json格式把数据提交到后台的话，JSON.stringify()必须有，否则只会当做表单提交
                data: JSON.stringify(jsondata),
                dataType: "json",
                success: function (result) {
                    let jsonData = JSON.stringify(result);
                    let jsonObj = JSON.parse(jsonData);
                    if (jsonObj["head"]["respCode"] === "0000") {
                        console.log("success:" + jsonData);
                        // 跳转扫码界面
                    } else {
                        console.log("请求失败: " + jsonData);
                        document.write("<label>返回数据<div id=\"resData\">"+jsonData+"</div></label>");
                    }
                },
                error: function (data) {
                    console.log("error" + data);
                }
            });
        });
    });
</script>
</body>
</html>